<template>
    <div>
        <MdEditor 
        ref="editorRef"
        v-model="text" :toolbarsExclude="toolbarsExclude"/>
        <MdPreview :modelValue="state.text" :editorId="state.id" />
        <!-- <MdCatalog :modelValue="state.text" :editorId="state.id" :scrollElement="scrollElement" :theme="state.theme" /> -->
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { MdEditor, MdPreview, MdCatalog } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import type { ExposeParam } from 'md-editor-v3'
import { onMounted } from 'vue';

const text = ref('Hello Editor!');

const state = reactive({
//   theme: 'dark',
  text: text,
  id: 'my-editor'
});

const toolbars = ['italic', 'underline', '-', 'bold', '=', 'github'];
// const scrollElement = document.documentElement;
const editorRef = ref<ExposeParam>()



onMounted(() => {
    editorRef.value?.togglePreview();
})
const toolbarsExclude:Array<any> = ['github']
// [
//   'bold',
//   'underline',
//   'italic',
//   '-',
//   'title',
//   'strikeThrough',
//   'sub',
//   'sup',
//   'quote',
//   'unorderedList',
//   'orderedList',
//   'task',
//   '-',
//   'codeRow',
//   'code',
//   'link',
//   'image',
//   'table',
//   'mermaid',
//   'katex',
//   '-',
//   'revoke',
//   'next',
//   'save',
//   '=',
//   'pageFullscreen',
//   'fullscreen',
//   'preview',
//   'htmlPreview',
//   'catalog',
//   'github'
// ];
</script>
